<template>
	<view class="page">
		<view class="head">
			<view class="item">
				<view>{{user.invitationCode}}</view>
				<view>邀请码</view>
			</view>
			<view class="item">
				<view>{{total}}</view>
				<view>推广数</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index"
				@click="to('/pages/MinePages/friend/main?id=' + item.id)">
				<image :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<view>{{item.nickName}}</view>
					<view>{{item.phone | formatPhone}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		mySpreadList
	} from "@/apis/request.js"

	export default {
		data() {
			return {
				user: {},
				page: 1,
				total: 0,
				list: []
			}
		},
		created() {
			this.init()
		},
		filters: {
			formatPhone(phone) {
				if (phone) {
					return phone.substring(0, 3) + '****' + phone.substring(7)
				} else {
					return ''
				}
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.getList()
			}
		},
		methods: {
			init() {
				getUserInfo({}).then(res => {
					this.user = res
				})
				this.page = 1;
				this.total = 0;
				this.list = [];
				this.getList();
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
			getList() {
				mySpreadList({
					pageNo: this.page,
					pageSize: 10
				}).then(res => {
					uni.stopPullDownRefresh()
					const list = res.records
					this.total = res.total
					if (this.page == 1) {
						this.list = list
					} else {
						this.list = this.list.concat(list)
					}
					if (this.list.length < this.total) {
						this.page++
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		position: relative;

		.head {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #F1F1F1;

			.item {
				flex: 1;
				text-align: center;
				padding: 30upx 0;

				view {
					font-size: 40upx;
					color: #32C59A;

					&:last-child {
						font-size: 28upx;
						color: #999;
					}
				}
			}
		}

		.list {
			padding-top: 160upx;

			.item {
				display: flex;
				flex-direction: row;
				padding: 20rpx 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				align-items: center;

				image {
					border-radius: 50%;
					height: 100rpx;
					width: 100rpx;
				}

				view {
					margin-left: 15rpx;
					flex: 1;
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
</style>